<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模块信息显示表</title>
</head>
  <link rel="stylesheet" href="../res/layui/css/layui.css"  media="all">
<body>
<!--layui-hide: 用于隐藏元素 lay-filter:事件过滤器,一般用于监听事件，可以看作一个id选择器 -->
<table id="myTable" class="layui-hide"  lay-filter="myTable"></table>
</body>
<!-- layui-btn-container:用于定义按钮的父容器  lay-event:相当于id-->
<script type="text/html" id="headBtn">
<div class="layui-btn-container">
  <button class="layui-btn layui-btn-sm" lay-event="add">增加数据</button>
</div>
</script>
<script type="text/html" id="barDemo">
  
{{# if(d.moduleValidity!='无效'){ }}
	   		 <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
	    {{# } else{}}
		<a class="layui-btn layui-btn-disabled layui-btn-xs" lay-event="update" >编辑</a>
 	 	<a class="layui-btn layui-btn-disabled layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
	    {{# } }}
</script>
<script src="../res/layui/layui.js" charset="utf-8"></script>
<script src="../res/js/jquery-3.4.1.min.js" charset="utf-8"></script>
<script>
  var table2 = "" ;
  layui.use('table',function(){
	  
	  //获取table数据保存在变量中
	  var table = layui.table;
	  var form = layui.form ;
	  
	  //数据交互
	  table2 = table.render({
		  elem:'#myTable',
		  url:'../Module/findAll.action',
		  toolbar:'#headBtn',//开启头部工具栏，并为其绑定左侧模板
		  defaultToolbar:['filter','exports','prints',{
			  title:'提示',
			  layEvent:'LAYTABLE_TIPS',
			  icon: 'layui-icon-tips'
		  }],
		  title:'模块数据表',
		  cols:[[
			  //是否禁用拖拽列宽（默认false）unresize:true,是否禁用排序sort:true
			  {field:'moduleId', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},
			  {field:'modmoduleName',title:'上级模块名',width:120},
			  {field:'moduleName',title:'模块名称',width:120},
			  {field:'moduleAddress',title:'模块地址',width:150},
			  {field:'moduleValidity',title:'是否有效',width:120 , templet:'#moduleValidity'},
			  {field:'moduleNote',title:'备注',width:120}
			  ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
		  ]],
		  page:true
	  });
	//头工具栏事件
	  table.on('toolbar(myTable)', function(obj){
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'add':
	        var data = checkStatus.data;
	        layer.open({
	        	  type: 2,
	        	  title: '数据',
	        	  closeBtn: 1, //不显示关闭按钮
	        	  shade: [0],
	        	  area: ['80%', '90%'],
	        	  anim: 2,
	        	  content: ['ModuleUpdate.html', 'no'], //iframe的url，no代表不显示滚动条
	        	  end: function(){
	        		  table2.reload();
	        	  }
	        	});
	      break;
	      //自定义头工具栏右侧图标 - 提示
	      case 'LAYTABLE_TIPS':
	        layer.alert('这是工具栏右侧自定义的一个图标按钮');
	      break;
	    };
	  });
	  
	  //监听行工具事件
	  table.on('tool(myTable)', function(obj){
	    var data = obj.data;
	    //console.log(obj)
	    if(obj.event === 'delete'){
	    if(data.moduleValidity=='有效'){
	      layer.confirm('真的删除行么', function(index){
	        var url = "../Module/delete.action";
	        var datas = {moduleId:data.moduleId};
	        $.post(url,datas,function(obj){
	        	if(obj.state==1){
	        		layer.msg("操作成功");
	        		table2.reload();
	        	}
	        	
	        },'json')
	      });
	    }
	    } else if(obj.event === 'update'){
	    	if(data.moduleValidity=='有效'){
	    	layer.open({
	        	  type: 2,
	        	  title: '数据',
	        	  closeBtn: 1, //不显示关闭按钮
	        	  shade: [0],
	        	  area: ['80%', '90%'],
	        	  anim: 2,
	        	  content: ['ModuleUpdate.html?id='+data.moduleId], //iframe的url，no代表不显示滚动条
	        	  end: function(){
	        		  table2.reload();
	        	  }
	        	});
	    	}
	    }
	  });
	  form.on('switch(sexDemo)', function(obj){
		    var url = "../Module/update.action";
		    var data = {moduleId:this.value , moduleValidity:obj.elem.checked}
		    $.post(url,data,function(obj){
		    	if(obj.state==1){
		    		layer.msg(obj.msg);
		    		table2.reload();
		    	}else{
		    		layer.msg(obj.msg);
		    	}
		    },"json")
		});
  });
</script>
 <script type="text/html" id="moduleValidity">
{{# if(d.moduleValidity!='无效') { }}
	<input type="checkbox" value="{{d.moduleId}}" name="moduleValidity" lay-skin="switch" lay-filter="sexDemo" lay-text="是|否" {{ d.moduleValidity == '有效' ? 'checked' : '' }}>

	{{# } else{}}
	<input type="checkbox" value="{{d.moduleId}}" disabled="" name="moduleValidity" lay-skin="switch" lay-filter="sexDemo" lay-text="是|否" {{ d.moduleValidity == '有效' ? 'checked' : '' }}>

	 {{# } }}
</script>
</html>